<template>
    <div class="app-container">
        <el-card class="box-card1" v-if="buildName != null && dormName != ''">
            <template #header>
                <div class="card-header">
                    <span>宿舍信息</span>
                </div>
            </template>
            <div class="text item">
                所在楼宇：{{ buildName }}
            </div>
            <div class="text item">
                所在宿舍：{{ dormName }}
            </div>
            <div class="text item">
                可住人数：{{ occupantsNumber }}
            </div>
            <div class="text item">
                现住人数：{{ nowNumber }}
            </div>
        </el-card>

        <el-card class="box-card2" v-if="property != null && property != ''">
            <template #header>
                <div class="card-header">
                    <span>宿舍财产信息</span>
                </div>
            </template>
            <el-table :data="property" border style="width: 100%" table-layout="fixed">
                <el-table-column prop="propertyName" label="名称" />
                <el-table-column prop="propertyNumber" label="数量" />
            </el-table>
        </el-card>

        <el-card class="box-card3" v-if="names != null && names != ''">
            <template #header>
                <div class="card-header">
                    <span>人员信息</span>
                </div>
            </template>
            <div v-for="o in names" :key="o" class="text item">
                {{ o }}
            </div>
        </el-card>
    </div>
</template>

<script setup name="studentDormInfo">
import { ElNotification, ElLoading } from 'element-plus'
import { getDormInfoApi } from '@/api/student'
const fullscreenLoading = ref(false)

const buildName = ref('')
const dormName = ref('')
const occupantsNumber = ref('')
const nowNumber = ref('')

const property = ref()

const names = ref()

const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(255,255,255,0)',
})

const getData = () => {
    getDormInfoApi().then(res => {
        let result = res.data
        buildName.value = result.buildName
        dormName.value = result.dormName
        occupantsNumber.value = result.occupantsNumber
        nowNumber.value = result.nowNumber
        property.value = result.property
        names.value = result.names
        loading.close()
    })
}
getData()


</script>
<style lang="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card1 {
    width: 300px;
    float: left;
    margin: 2vh 1vw;
}

.box-card2 {
    width: 300px;
    float: left;
    margin: 2vh 1vw;
}

.box-card3 {
    width: 300px;
    float: left;
    margin: 2vh 1vw;
}
</style>
